<template>
  <div class="container">
    <div class="div_box">
      <div class="head">基本信息</div>
      <div class="div_neiron">
        <div><span>设备编码：</span>{{ deviceInfo.imei || "-" }}</div>
        <div><span>设备ID：</span>{{ deviceInfo.deviceId || "-" }}</div>
        <div><span>产品类型：</span>{{ deviceInfo.productName }}</div>
        <div><span>产品型号：</span>{{ deviceInfo.classMark }}</div>
        <div>
          <span>设备状态：</span>
          <span v-if="deviceInfo.online == 1">在线</span>
          <span v-else>离线</span>
        </div>
        <div>
          <span>告警状态：</span>
          <span v-if="deviceInfo.isAlarm == 0">正常</span>
          <span v-if="deviceInfo.isAlarm == 1">告警</span>
        </div>
        <div><span>iccid：</span>{{ deviceInfo.iccid || "-" }}</div>
        <div><span>imsi：</span>{{ deviceInfo.imsi || "-" }}</div>

        <div>
          <span>最后一次上报时间：</span>{{ deviceInfo.lastTime || "-" }}
        </div>
        <!-- <div><span>创建时间：</span>{{ deviceInfo.createTime || "-" }}</div> -->
        <div><span>离线时间：</span>{{ deviceInfo.offlineTime || "-" }}</div>
        <div><span>上线时间：</span>{{ deviceInfo.onlineTime || "-" }}</div>
        <div
          v-if="user.roleName == 'ORG_ADMIN' || user.roleName == 'TENANT_ADMIN'"
        >
          <div><span>安装点：</span>{{ deviceInfo.spaceName || "-" }}</div>
        </div>
      </div>
    </div>
    <el-row :gutter="0" type="flex" class="content">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        v-permission="{ action: 'host:password' }"
      >
        <div class="div_box" style="margin: 15px 15px 15px 30px">
          <div class="head">指令密码</div>
          <div >
            <el-button
              class="button-new-tag"
              type="primary"
              size="small"
              @click="onCmdPasswordState()"
              v-if="!statusInfo.cmdPasswordState"
            >
              设置密码
            </el-button>
            <div v-else>
              <el-button
                class="button-new-tag"
                type="primary"
                size="small"
                @click="onCmdPasswordState('view')"
              >
                查看密码
              </el-button>
              <el-button
                class="button-new-tag"
                type="primary"
                size="small"
                @click="onCmdPasswordState('edit')"
              >
                编辑密码
              </el-button>
            </div>
            <!-- <el-input
          v-model="password"
          type="password"
          show-password
          :disabled="!!statusInfo.cmdPasswordState"
          clearable
          placeholder="请设置指令密码"
          size="small"
          style="width: 260px"
          maxlength="20"
        >
          <el-button slot="append" @click="confirmPassword">
            {{ statusInfo.cmdPasswordState ? "查看" : "确定" }}
          </el-button>
        </el-input> -->
          </div>
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        v-permission="{ action: 'host:hostNumber' }"
      >
        <div class="div_box" style="margin: 15px 30px 15px 15px">
          <div class="head">主机号</div>
          <div>
            <el-button
              class="button-new-tag"
              type="primary"
              size="small"
              @click="onHostNumber()"
              v-if="!statusInfo.hostNumber"
            >
              设置主机号
            </el-button>
            <div v-else>
              <el-button
                class="button-new-tag"
                type="primary"
                size="small"
                @click="onHostNumber()"
              >
                编辑主机号
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <InstructPassword
      ref="refInstructPassword"
      :deviceInfo="deviceInfo"
      :statusInfo="statusInfo"
      :handleType="handleType"
      pageType=""
      @update="getDetectorDxtend"
    />
    <SetHostNumber
      ref="refSetHostNumber"
      :deviceInfo="deviceInfo"
      :statusInfo="statusInfo"
      @update="getDetectorDxtend"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqDetectorDxtend } from "@/api/api";
import InstructPassword from "./InstructPassword.vue";
import SetHostNumber from "./SetHostNumber.vue";
export default {
  props: ["deviceInfo"],
  components: {
    InstructPassword,
    SetHostNumber,
  },
  data() {
    return {
      statusInfo: {}, // 状态信息

      handleType: "", // 指令密码类型：view-查看，edit-编辑
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {},
  mounted() {},
  methods: {
    // 状态信息
    async getDetectorDxtend() {
      let res = await reqDetectorDxtend({
        deviceCode: this.deviceInfo.imei || this.deviceInfo.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.statusInfo = res.data.detail;
      // this.password = this.statusInfo.cmdPasswordState ? "******" : "";
    },

    // 确认密码
    async onCmdPasswordState(type) {
      this.$refs.refInstructPassword.dialogVisible = true;
      this.handleType = type;
    },

    // 主机号
    onHostNumber() {
      this.$refs.refSetHostNumber.dialogVisible = true;
    },
  },
};
</script>


<style lang="less" scoped>
.container {
  color: @primaryThemeTxtColor4;
  font-size: 14px;
  height: 100%;
  overflow-y: auto;

  .div_box {
    background: @primaryBorderColor3;
    border-radius: 15px;
    padding: 20px 25px 50px 35px;
    box-sizing: border-box;
    margin: 15px 30px 15px;
    position: relative;
    &:last-child {
      margin-bottom: 40px;
    }

    .head {
      font-size: 16px;
      color: #7367f0;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .div_neiron {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      box-sizing: border-box;
      line-height: 35px;

      > div {
        width: 33.33%;

        > span:first-of-type {
          color: @primaryFFFColor6;
        }
      }
    }

    .div_tab {
      display: flex;

      > div {
        background: @primaryBorderColor4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin-right: 15px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        box-sizing: border-box;

        > span:first-of-type {
          margin-bottom: 8px;
        }
      }
    }
  }
}

::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
::v-deep .el-button--primary {
  &:hover {
    color: #ddd;
  }
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}
</style>